<!--
 * @Author: your name
 * @Date: 2020-09-10 14:13:38
 * @LastEditTime: 2021-10-25 16:53:00
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /gatt/src/modules/front/pages/GattDrag/components/GattDate/components/SecondRow.vue
-->
<template>
  <div class="gatt-main-wrap-row">
    <!-- 按天 -->
    <template v-if="currentDaySize.mode === 'day'">
      <div
        class="cell"
        v-for="(j, index) in days"
        :key="index + 'cc'"
        :style="{ width: currentDaySize.value + 'px' }">
        <span
          class="cell-num"
          :style="{
            borderLeft: index == 0 ? 'none' : '1px solid #d7d7d7'
          }"
          :class="{weekday: j.weekday === 0 || j.weekday === 6}">
          {{j.date}}
        </span>
        <span
          class="cell-bg"
          :style="{
            width: currentDaySize.value + 'px',
            height:
              j.weekday === 0 || j.weekday === 6 ? lineBgHeight : '0px'
          }"
          :class="{weekday2: j.weekday === 0,weekday1: j.weekday === 6,}"
        ></span>
      </div>
    </template>
    <!-- 按周 -->
    <template v-if="currentDaySize.mode === 'week'">
      <div
        class="cell"
        v-for="(j, index) in days"
        :key="index + 'cc'"
        :style="{ width: currentDaySize.value + 'px' }">
        <span
          class="cell-num weekMode"
          :class="{
            'weekday': j.weekday === 0 || j.weekday === 6
            }">
          <span
            v-show="j.weekday === 1"
            :style="{
              borderLeft: index == 0 ? 'none' : '1px solid #d7d7d7'
            }">
            {{j.date}}
          </span>
        </span>
        <span
          class="cell-bg"
          :style="{
            width: currentDaySize.value + 'px',
            height:
              j.weekday === 0 || j.weekday === 6 ? lineBgHeight : '0px'
          }"
          :class="{weekday2: j.weekday === 0,weekday1: j.weekday === 6}"
        ></span>
      </div>
    </template>
    <!-- 按月 -->
    <template v-if="currentDaySize.mode === 'month'">
      <div
        class="cell"
        v-for="(j, index) in days"
        :key="index + 'month'"
        :style="{ width: currentDaySize.value + 'px' }">
        <span
          class="cell-num weekMode"
          :class="{
            'weekday': j.weekday === 0 || j.weekday === 6
            }">
          <span
            v-show="j.date === 1"
            :style="{
              borderLeft: index == 0 ? 'none' : '1px solid #d7d7d7'
            }">
            {{j.date}}
          </span>
        </span>
        <span
          class="cell-bg"
          :style="{
            width: currentDaySize.value + 'px',
            height:
              j.weekday === 0 || j.weekday === 6 ? lineBgHeight : '0px'
          }"
          :class="{weekday2: j.weekday === 0,weekday1: j.weekday === 6}"
        ></span>
      </div>
    </template>
    <!-- 按季度 -->
    <template v-if="currentDaySize.mode === 'quarter'">
      <div
        class="cell"
        v-for="(j, index) in days"
        :key="index + 'month'"
        :style="{ width: currentDaySize.value + 'px' }">
        <span
          class="cell-num weekMode"
          :class="{
            'weekday': j.weekday === 0 || j.weekday === 6
            }">
          <span
            v-show="j.quarterStrat"
            :style="{
              borderLeft: index == 0 ? 'none' : '1px solid #d7d7d7'
            }">
            {{j.date}}
          </span>
        </span>
        <span
          class="cell-bg"
          :style="{
            width: currentDaySize.value + 'px',
            height:
              j.weekday === 0 || j.weekday === 6 ? lineBgHeight : '0px'
          }"
          :class="{
            'weekday2-noboder': j.weekday === 0,
            'weekday1-noboder': j.weekday === 6}"
        ></span>
      </div>
    </template>
    <!-- 按半年 -->
    <template v-if="currentDaySize.mode === 'halfYear'">
        <div
          class="cell halfYear"
          v-for="item in allDays"
          :key="item.year"
          :style="{ width: item.days * currentDaySize.value + 'px' }"
        >
        <span>上半年</span>
        <span>下半年</span>
      </div>
    </template>
  </div>
</template>

<script>
export default {
  name: 'SecondRow',
  props: {
    days: {
      type: Array,
      default: () => []
    },
    allDays: {
      type: Array,
      default: () => []
    },
    lineBgHeight: {
      type: Number,
      default: () => 0
    },
    currentDaySize: {
      type: Object,
      default: () => {
        return { label: '按天', value: 40, mode: 'day' }
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
  .gatt-main-wrap-row{
    display: flex;
    height: 21px;
    .cell{
      position: relative;
      display: inline-block;
      box-sizing: border-box;
      text-align: center;
      &-num{
        display: block;
        height: 100%;
        line-height: 20px;
        border-bottom: 1px solid #d7d7d7;
        border-left: 1px solid #d7d7d7;
        box-sizing: border-box;
        &.weekday{
          color: #c7c7c7;
        }
        &.weekMode{
          border-left: none;
          span{
            width: 100%;
            height: 100%;
            display: block;
          }
        }
      }
      &-bg{
        position: absolute;
        top: 21px;
        left: 0px;
        display: block;
        box-sizing: content-box;
        &.weekday1{
          border-left: 1px solid #d7d7d7;
          width: 100%;
          background-image: linear-gradient(to bottom, #f8f8f8, #f8f8f8);
        }
        &.weekday2{
          border-right: 1px solid #d7d7d7;
          width: 100%;
          background-image: linear-gradient(to bottom, #f8f8f8, #f8f8f8);
        }
        &.weekday1-noboder{
          border-left: 1px solid transparent;
          width: 100%;
          background-image: linear-gradient(to bottom, #f8f8f8, #f8f8f8);
        }
        &.weekday2-noboder{
          border-right: 1px solid transparent;
          width: 100%;
          background-image: linear-gradient(to bottom, #f8f8f8, #f8f8f8);
        }
      }
      &.halfYear{
        margin-left: 1px;
        span{
          display: inline-block;
          width: 50%;
          line-height:20px;
          border-bottom: 1px solid #d7d7d7;
          border-right: 1px solid #d7d7d7;
          box-sizing: border-box;
        }
        &:last-child{
          span{
            &:last-child{
              border-right: none;
            }
          }
        }
      }
    }
  }
</style>
